<template>
  <el-container>
    <Header />
    <el-header>
      <header-nav />
    </el-header>
    <hr size="1" width="100%" />
    <el-main>
      <el-row>
        <el-col :span="4"><div class="grid-content"></div></el-col>

        <!-- 图书详情展示 -->
        <el-col :span="16">
          <el-row>
            <!--大图展示-->
            <el-col :span="8">
              <div class="demo-image__placeholder">
                <el-image :src="productImg" class="mainImg">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </el-col>
            <!--内容展示区-->
            <el-col :span="16">
              <div style="padding: 0px 20px">
                <!-- 书名 -->
                <div class="font-bookName" style="background: cornflowerblue">
                  {{ productName }}
                </div>
                <!-- 书籍简介 -->
                <div style="text-align: left">
                  <span class="bookContent">{{ abstr }}</span>
                  <span class=""></span>
                </div>
                <el-row>
                  <el-col :span="16" class="price-num" style="text-align: left">
                    <!-- 价钱 -->
                    <span class="font-waitPay">原价：￥{{ price }}</span>
                    <div style="margin: 20px auto">
                      <!-- 数量 -->
                      <el-input-number
                        size="mini"
                        v-model="preorderNum"
                        :min="1"
                        :max="number"
                        @change="number"
                        :precision="0"
                      >
                      </el-input-number>
                    </div>
                    <span style="color: dimgrey">库存：{{ number }}</span
                    ><br />
                    <span style="color: dimgrey">可购买数量：{{ number }}</span>
                  </el-col>
                  <!-- 操作按钮 -->
                  <el-col :span="8" style="margin: 40px auto">
                    <div>
                      <el-button
                        :disabled="isDisabled"
                        class="el-icon-star-off"
                        @click="addToCollection()"
                      ></el-button>
                      <el-button
                        plain
                        icon="el-icon-shopping-cart-2"
                        @click="addToCart()"
                      >
                      </el-button>
                      <el-button
                        style="margin: 10px"
                        type="danger"
                        @click="nowToBuy()"
                        >立即购买</el-button
                      >
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 商品评价 -->
      <el-row>
        <el-col :span="4"><div class="grid-content"></div></el-col>
        <el-col :span="16">
          <el-divider></el-divider>
          <!-- 书籍评论 -->
          <div class="comment-content">
            <el-tabs type="card">
              <el-tab-pane label="全部评价" name="first">
                <all-comment-detail :comments="comments.all" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import Header from "../../components/front/Header.vue";
import HeaderNav from "../../components/front/HeaderNav.vue";
import AllCommentDetail from "../../components/front/CommentDetail.vue";
import { jwtDecode } from "jwt-decode";
// import { mapState } from "vuex";
export default {
  name: "BookDetail",
  components: {
    Header,
    HeaderNav,
    AllCommentDetail,
  },
  data() {
    return {
      isDisabled: false,
      productId: -1,
      abstr: "",
      productName: "",
      price: "",
      preorderNum: 1,
      number: 0,
      productImg: "",
      comments: {
        all: {},
        commmentCount: 0,
      },
      pageNow: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.findDetailByBookId();
  },

  methods: {
    //通过书籍 id 查询书籍详细信息 [应该包括商品评价信息]
    findDetailByBookId() {
      let productId = this.$route.query.productId;
      this.productId = productId;
      // console.log(bookId);
      axios
        .get("/getProductDetails", {
          params: {
            productId: this.productId,
            pageNow: this.pageNow,
            pageSize: this.pageSize,
          },
        })
        .then((response) => {
          console.log(response, "+++++++++++++++++++++++");
          this.productId = response.data.data.details.productId;
          console.log("productId", this.productId);
          this.number = response.data.data.details.number;
          let allComments = response.data.data.comments.comments;
          console.log("所有评论：", allComments);
          this.comments.all = allComments;
          allComments.forEach((item) => {
            // console.log(item);
            this.comments.all.push(item);
          });
          this.price = response.data.data.details.price;
          this.abstr = response.data.data.details.abstr;
          this.productImg = response.data.data.details.productImg;
          // this.showImg = this.bookImgs[0];
          // console.log(this.book);
          // console.log(this.bookImgs);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //   //更具书籍 id 评级类型查找评论
    findCommmentByType() {},
    //修改大图显示图片
    changeShowImg(img) {
      // console.log(img);
      this.productImg = img;
    },

    //加入购物车结果信息
    addSuccessCart() {
      this.$message({
        message: "恭喜你，加入购物车成功！",
        type: "success",
      });
    },

    

    // 加入购物车
    addToCart() {
      console.log("准备将书籍" + this.productId + "加入购物车");
      // 1.获取当前用户 id
      // 2.将用户 id、书籍 id、书籍数量 num、 作为参数传给后端
      const token = localStorage.getItem("token");
      const decoded = jwtDecode(token);
      console.log(decoded.userId);
      console.log("preorderNum", this.preorderNum);
      axios
        .post(
          "/shoppingchart/add",
          {
            userId: decoded.userId,
            productId: this.productId,
            preorderNum: this.preorderNum,
            // currentPrice: this.currentPrice,
          },
          {
            headers: {
              "Content-Type": "application/json", // 设置请求类型为 JSON
            },
          }
        )
        .then((response) => {
          console.log(response);
          let msg = response.data.message;
          if (msg === "添加成功") {
            this.addSuccessCart();
          } else {
            this.$message.error("添加失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //收藏
    addToCollection() {
      console.log("准备将书籍" + this.productId + "加入收藏表");
      // 1.获取当前用户 id
      // 2.将用户 id、书籍 id、作为参数传给后端
      const token = localStorage.getItem("token");
      const decoded = jwtDecode(token);
      console.log(decoded.userId);
      axios
        .post(
          "/collection/add",
          {
            userId: decoded.userId,
            productId: this.productId,
          },
          {
            headers: {
              "Content-Type": "application/json", // 设置请求类型为 JSON
            },
          }
        )
        .then((response) => {
          console.log(response);
          let msg = response.data.message;
          if (msg === "添加成功") {
            this.addSuccessCollection();
          } else {
            this.$message.error("收藏失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //加入收藏成功
    addSuccessCollection() {
      this.$message({
        message: "收藏成功！",
        type: "success",
      });
      this.isDisabled = true;
    },

    //立即购买
    nowToBuy() {
      this.$message({
        message: "请先加入购物车",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-header {
  background-color: rgb(200, 9, 9);
}
.el-footer {
  //background-color: #b3c0d1;
  //color: #333;
  text-align: center;
}
.el-main {
  //background-color: #e9eef3;
  color: #333;
  text-align: center;
}
//包含最大图的 div
.demo-image__placeholder {
  border: 1px solid #8492a6;
  margin: 30px auto;
}
//最大的显示图
.mainImg {
  height: 100%;
  width: 100%;
}

//书名展示样式
.font-bookName {
  font-family: "PingFang SC Blod";
  font-size: large;
  color: whitesmoke;
  border-radius: 4px;
  margin: 10px auto;
}

//书籍简述
.bookContent {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 11; //最多显示的行数
  -webkit-box-orient: vertical;
}
//价格个数量div样式
.price-num {
  text-align: left;
  margin: 20px auto;
}
//价钱展示样式
.font-waitPay {
  font-family: "PingFang SC Blod";
  font-size: large;
  color: red;
  border-radius: 4px;
  margin: 10px auto;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.comment-content {
  /*border-radius: 4px;*/
  min-height: 36px;
  text-align: left;
}
.row-bg {
  padding: 10px 0;
  //background-color: #f9fafc;
}
.grid-item img {
  height: 100%;
  width: 90%;
}
.el-carousel__container {
  position: relative;
  width: 100%;
  margin: 0px 1px;
  /*border: #ff4141 1px solid;*/
  /*margin-left: 286px;*/
  margin-top: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
</style>
